import React, { useState } from 'react';
import { Button, Modal, Form, Input, Radio,Menu, Cascader, Select, Row, Col, Checkbox, AutoComplete,InputNumber,message  } from 'antd';
import service from '../lib/service'
const formItemLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 24 },
};

const Collections = ({ visible, onCreate, onCancel }) => {
    const [form] = Form.useForm();
    const getCode = async () => {
        const phone = form.getFieldsValue(['phone'])
        console.log(phone)
        const result = await service.registerCode(phone);
        try{
            if(result.data.success == true){
                message.success('已发送验证码到手机');
            }
        }catch {
            message.error('发送验证码失败');
        }
        console.log(result)
    }
    const onChange = () => {
        console.log()
    }
    return (
        <Modal
            visible={visible}
            title="注册"
            okText="注册"
            cancelText="返回"
            onCancel={onCancel}
            onOk={() => {
                form
                    .validateFields()
                    .then((values) => {
                        console.log(values)
                        form.resetFields();
                        onCreate(values);
                    })
                    .catch((info) => {
                        console.log('Validate Failed:', info);
                    });
            }}
        >
            <Form
                {...formItemLayout}
                form={form}
                layout="vertical"
                name="register"
            >
                <Form.Item
                    name="phone"
                    label="电话号码"
                    rules={[
                        {
                            required: true,
                            message: '请输入电话号码',
                        },
                    ]}
                >
                    <Input
                        style={{

                        }}
                    />
                </Form.Item>
                <Form.Item label="验证码" extra="">
                    <Row gutter={6}>
                        <Col span={18}>
                            <Form.Item
                                name="code"
                                noStyle
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入验证码',
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Button onClick={()=>{getCode()}}>获取验证码</Button>
                        </Col>
                    </Row>
                </Form.Item>
                <Form.Item
                    name="password"
                    label="密码"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码',
                        },
                    ]}
                    hasFeedback
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    name="verifyPassword"
                    label="请再次输入密码"
                    dependencies={['password']}
                    hasFeedback
                    rules={[
                        {
                            required: true,
                            message: '请输入密码',
                        },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                console.log(value)
                                if (!value || getFieldValue('password') === value) {
                                    return Promise.resolve();
                                }

                                return Promise.reject(new Error('The two passwords that you entered do not match!'));
                            },
                        }),
                    ]}
                >
                    <Input.Password />
                </Form.Item>
            </Form>
        </Modal>
    );
};

const Register = () => {
    const [visible, setVisible] = useState(false);

    const onCreate = async (values) => {
        console.log('Received values of form: ', values);
        const result = await service.register(values);
        console.log(result)
        try{
            if(result.data.success == true){
                message.success('注册成功');
            }
        }catch {
            message.error('注册失败');
        }
        setVisible(false);
    };

    return (
        <>
            <Button  type="text" onClick={() => {
                setVisible(true);
            }}>注册
            </Button>
            <Collections
                visible={visible}
                onCreate={onCreate}
                onCancel={() => {
                    setVisible(false);
                }}
            />
            <style jsx>
                {`
                .collection-create-form_last-form-item {
                   margin-bottom: 0;
                }
               `}
            </style>
        </>
    );
};
export default Register;